﻿<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>HTML5 地理定位</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body onload="loadDemo()">

<h1>HTML5 地理位置追踪器</h1>

<p id="status">你的浏览器不支持HTML5地理定位</p>

<h2>当前位置:</h2>
<table border="1">
<tr>
<th width="40" scope="col"><h5>纬度</h5></th>
<td width="114" id="latitude">?</td>
</tr>
<tr>
<td> 经度</td>
<td id="longitude">?</td>
</tr>
<tr>
<td>准确度</td>
<td id="accuracy">?</td>
</tr>
<tr>
<td>最近的时间戳</td>
<td id="timestamp">?</td>
</tr>
</table>

<h4 id="currDist">当前旅行的距离: 0.0 km</h4>
<h4 id="totalDist">总的旅行距离: 0.0 km</h4>

</body>

<script text="text/javascript">

	var totalDistance = 0;
	var lastLat;
	var lastLong;

	Number.prototype.toRadians = function() {
		return this * Math.PI / 180;
	}

	
	function loadDemo(){
		If(navigator.geolocation){
			updateSatus("你的浏览器支持HTML5地理定位");
			navigator.geolocation.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});
		}
	}

	function updateSatus(message){
		document.getElementById("status").innerHTML = message;
	}

	function distance(latitude1,longitude1,latitude1,longitude1){
		//R是地球的半径，以km为单位
		var R = 6371;
		var deltaLatitude = toRadians(latitude2 - latitude1);
		var deltaLongitude = toRadians(longitude2 - longitude1);

		latitude1 = toRadians(latitude1);
		latitude2 = toRadians(latitude2);

		var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2);
		
		var c = 2 * Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
		var d = R * c;
		return d;
	}
	

	function updateLocation(position){
		var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var timestamp = position.timestamp;
		
		document.getElementById("latitude").innerHTML = latitude;
        document.getElementById("longitude").innerHTML = longitude;
        document.getElementById("accuracy").innerHTML = accuracy;
        document.getElementById("timestamp").innerHTML = timestamp;

		if(accuracy >= 500){
			updateStatus("不需要计算精确距离");
			return;
		}

		if((lastLat != null) && (lastLong !=null)){
			var currentDistance = distace(latitude, longitude, lastLat, lastLong);
			document.getElementById("currDist").innerHTML =
              "当前旅行的距离: " + currentDistance.toFixed(4) + " km";

            totalDistance += currentDistance;

            document.getElementById("totalDist").innerHTML =
              "总的旅行距离: " + currentDistance.toFixed(4) + " km";
		}

		lastLat = latitude;
		lastLong = longitude;

		updateStatus("成功更新位置。");
	}	

    function handleLocationError(error) {
        switch(error.code)
        {
        case 0:
          updateStatus("检索位置发生错误：" + error.message);
          break;
        case 1:
          updateStatus("用户阻止检索位置信息。");
          break;
        case 2:
          updateStatus("浏览器不能检索位置信息：" + error.message);
          break;
        case 3:
          updateStatus("浏览器检索位置信息超时。");
          break;
        }
    }

</script>

</html>